<template>
	<view class="tab-wrap">
		<scroll-view class="scroll-box" scroll-x="true" @scroll="scroll" scroll-left="0">
			<view class="tab-box" :style="{width:`${120*list.length}rpx`}">
				<block v-for="(item,index) in list" :key="item.id">
					<view class="tab-item" :class="{'active':currentIndex == index}" @click="tabItem(index)">
						{{item.name}}
					</view>
				</block>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "my-tabs",
		props: {
			list: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				old: {
					scrollTop: 0
				},
				currentIndex: 0
			};
		},
		mounted() {
			// console.log(this.list);
		},
		methods: {
			scroll(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			tabItem(index) {
				this.currentIndex = index
				this.$emit('tabData', index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tab-wrap {
		padding-right: 20rpx;

		.scroll-box {
			white-space: nowrap;
			width: 100%;

			.tab-box {
				min-width: 100%;
				display: flex;
				padding-left: 20rpx;
				margin-bottom: 10rpx;

				.tab-item {
					height: 60rpx;
					// width: 100rpx;
					padding: 0 30rpx;
					line-height: 60rpx;
					text-align: center;
					// border: 2rpx solid red;
					border-radius: 2rpx;
					// margin-right: 10rpx;
					font-size: 28rpx;
					font-weight: 600;
				}

				.active {
					color: #ccb972;
					background-color: #f3f4f8;
				}
			}
		}
	}
</style>
